<template>
    <div class="box">
        <h2>找回密码</h2>
        <div :class="{'statue':email_s}">
            <p>暂时只支持QQ邮箱</p>
            <input class="selected" type="email" placeholder="账户邮箱" v-model="email">
        </div>
        <div class="captcha_input">
            <input type="text" placeholder="验证码" v-model="captcha">
            <p class="fetch captcha" @click="fetch($event)">发送验证码</p>
        </div>
        <div :class="{'statue':pas_new_s}">
            <p>包含字母和数字,长度在6-16之间</p>
            <input class="selected" type="password" placeholder="设置新密码" v-model="pas_new" maxlength="16">
        </div>
        <span class="enroll" @click="submit">提交</span>

        <div class="return_" @click="return_">
            &lt; 登录
        </div>
    </div>
</template>

<script>
import api from "@/api";

export default {
    name: "RecoverThePassword",
    data() {
        return {
            time: "",
            times: 60,
            index: true,
            pas: false,
            pas_new: "",
            email: "",
            captcha: "",
            pas_new_s: false,
            email_s: false,
            user: {
                password: "",
                email: "",
                captcha: "",
            },

        }
    },
    watch: {
        email(newValue, oldValue) {
            let pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            this.email_s = !pattern.test(newValue);
        },
        pas_new(newValue, oldValue) {
            let pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            this.pas_new_s = !pattern.test(newValue);
        },

    },
    methods: {
        return_() {
            this.$emit("stateSwitching", 1);
        },
        submit() {
            if (this.email === "" || this.pas_new === "" || this.captcha === "") {
                alert("请将信息填充完整！")
                return 0;
            }
            if (this.email_s || this.pas_new_s) {
                alert("信息有误，请检查！")
                return 0;
            }
            this.user.captcha = this.captcha;
            this.user.email = this.email;
            this.user.password = this.pas_new;
            console.log(this.user)
            api.recoverThePassword(this.user).then((res) => {
               if(res.data.data==="success"){
                   alert("修改密码成功！");
                   this.return_();
               }else if(res.data.data==="error"){
                   alert("修改密码失败！");
               }
            })
        },
        fetch(e) {
            if (this.email_s === true || this.email === '') {
                alert("邮箱为空或格式不正确！")
                return 0;
            }
            api.enrollCaptcha(this.email).then((res) => {
            })
            if (this.index) {
                this.index = false;
                this.pas = !this.pas;
                clearInterval(this.time);
                this.time = setInterval(() => {
                    e.target.innerHTML = this.times--;
                    if (this.times === 0) {
                        clearInterval(this.time)
                        e.target.innerHTML = "发送验证码";
                        this.times = 60;
                        this.index = true;
                        this.pas = !this.pas;
                    }
                }, 1000)
            }

        },
    }
}
</script>

<style scoped>
p {
    color: rgba(250, 7, 7, 0.6);
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 700;
}

.box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
}

h2 {
    color: white;
    padding: 10px;
    font-weight: bolder;
}

input, .enroll {
    position: relative;
    text-indent: 0.5rem;
    color: white;
    min-font-size: 12px;
    font-size: 0.8vw;
    height: 5.5vh;
    width: 17vw;
    min-width: 250px;
    min-height: 35px;
    outline: none;
    background: none;
    margin-bottom: 3vh;
    border: 1px solid #ffffff;
    border-radius: 3px;
    transition: all .3s;
}

.enroll {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

input::placeholder {
    color: #eadcdc;
}

.selected:hover, .enroll:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px 1px #f8f3f3;
    background: rgba(220, 76, 76, 0.6);
}

.statue {
    position: relative;
}

.statue::after {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    content: "";
    right: -10%;
    top: 50%;
    width: 30px;
    height: 30px;
    background: url("/img/common/love_no.png") no-repeat center;
    background-size: 50%;
    transform: translateY(-50%);
}

.captcha_input {
    position: relative;
}

.captcha_input input {
    height: 5.5vh;
    min-height: 40px;
    font-weight: 700;
    font-size: 1rem;
}

.fetch {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    border: 0;
    color: white;
    background: #3586f1;

}

.fetch:hover {
    cursor: pointer;
    opacity: .8;
}

.captcha {
    position: absolute;
    right: 0;
    top: 0;
    width: 5vw;
    height: 5.5vh;
    min-height: 40px;
    min-width: 70px;
    border-radius: 3px;
}

.agreement span {
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.agreement span:hover {
    text-decoration: underline;
}

#agreement_i {
    min-width: 12px;
    min-height: 12px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    margin-right: 5px;
    /*margin-top: 10px;*/
}

.return_ {
    position: absolute;
    top: 0;
    left: 0;
    color: #fcf9f9;
    font-size: 1rem;
    font-weight: 700;
}

.return_:hover {
    color: #f55b5b;
    cursor: pointer;
}
@media (min-width: 0) and (max-width: 800px) {
    input::placeholder{
        min-font-size: 15px;
    }

}
</style>